/** * Create by mzq * Description: 注册弹框 * Date: 2025/2/10 09:12 * Update:
2025/2/10 09:12 */
<template>
  <transition name="fade">
    <div v-if="visible" class="dialog-wrapper">
      <!-- 弹框内容过渡 -->
      <transition name="scale">
        <div class="dialog-content">
          <div class="header">
            <div class="title">用户注册</div>
            <!-- 添加标题 -->
            <div class="close-btn" @click="handleClose">×</div>
          </div>

          <div class="content">
            <div class="form-group">
              <label>用户名:</label>
              <input
                type="text"
                v-model="username"
                placeholder="请输入用户名" />
            </div>

            <div class="form-group">
              <label>请设置密码:</label>
              <input
                type="password"
                v-model="password"
                placeholder="请输入密码" />
            </div>

            <div class="form-group">
              <label>请确认密码:</label>
              <input
                type="password"
                v-model="confirmPassword"
                placeholder="请再次输入密码" />
            </div>

            <div class="buttons">
              <div>
                <fui-button
                  @click="handleClose"
                  radius="5rpx"
                  background="#E9E9E9"
                  color="#000000"
                  width="80px"
                  >取消
                </fui-button>
              </div>
              <div style="margin-left: 10px">
                <fui-button
                  @click="submitBtn"
                  radius="5rpx"
                  width="80px"
                  background="#6DF7BE"
                  color="#000000"
                  >注册
                </fui-button>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
import FuiButton from '@/components/firstui/fui-button/fui-button.vue'
import { toast } from '@/utils'
import { readJsonFromFile, writeJsonToFile } from '@/utils/fileUtil'

export default {
  name: 'registerDiaLog',
  components: { FuiButton },
  props: {
    // 控制弹框显示隐藏
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      // 用户名
      username: '',
      // 密码
      password: '',
      // 确认密码
      confirmPassword: '',
    }
  },
  methods: {
    // 注册按钮
    submitBtn() {
      // 验证输入
      if (!this.username || !this.password || !this.confirmPassword) {
        return toast('填写项不能为空')
      }

      // 验证用户名格式：4-16个字符，仅支持大小写英文字母、汉字
      const usernameRegex = /^[a-zA-Z\u4e00-\u9fa5]{4,16}$/
      if (!usernameRegex.test(this.username)) {
        return toast('用户名长度为4-16个字符，仅支持大小写英文字母、汉字')
      }

      // 验证密码格式：6-20个字符，仅支持数字、下划线、大小写英文字母
      const passwordRegex = /^[a-zA-Z0-9_]{6,20}$/
      if (!passwordRegex.test(this.password)) {
        return toast('密码长度为6-20个字符，仅支持数字、下划线、大小写英文字母')
      }

      if (this.password !== this.confirmPassword) {
        return toast('两次输入的密码不一致')
      }

      // 读取现有的用户数据
      let users = readJsonFromFile('/sdcard/test/user.json')
      // 检查用户名是否已存在
      const isUserExist = users.some((user) => user.name === this.username)
      if (isUserExist) {
        return toast('用户名已存在')
      }
      let arr = []
      // 添加新用户
      arr.push({ name: this.username, password: this.password })

      // 写入新的用户数据
      writeJsonToFile(arr, '/sdcard/test/user.json')
      toast('注册成功')
      this.username = '';
      this.password = '';
      this.confirmPassword = '';
      this.handleClose();
    },
    // 关闭按钮
    handleClose() {
      // 通知父组件关闭弹框
      this.$emit('close')
    },
  },
}
</script>

<style scoped lang="scss">
.dialog-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;

  .dialog-content {
    position: relative;
    width: 400px;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 5px 10px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    transform: translateY(-30px);

    .content {
      width: 80%;
      margin: 0 auto;

      .form-group {
        margin-bottom: 20px;
        display: flex; /* 使用 Flexbox 布局 */
        align-items: center; /* 垂直居中对齐 */

        label {
          width: 100px; /* 设置固定宽度或根据需要调整 */
        }

        input {
          flex: 1; /* 输入框占据剩余的空间 */
          padding: 8px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
      }

      .buttons {
        display: flex; /* 使用 Flexbox 布局 */
        justify-content: center; /* 水平居中对齐按钮 */
        margin-top: 20px; /* 根据需要添加顶部外边距 */
      }
    }
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #a1a2a3;

    .title {
      padding-left: 10px;
      font-size: 20px;
      color: #a1a2a3;
    }

    .close-btn {
      font-size: 34px;
      cursor: pointer;
      color: #a1a2a3;
      transition: color 0.3s;
      padding-right: 10px;

      &:hover {
        color: #666;
      }
    }
  }
}

/* 遮罩层淡入淡出 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 弹框缩放动画 */
.scale-enter-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scale-leave-active {
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: translateY(-30px) scale(0.95);
}
</style>
